<template>
    <div class="play-wrap">
         <!-- 头部导航 -->
        <wxc-minibar class="border-bottom" title="玩法说明" >
 
        </wxc-minibar>
        <div class="paly-content">
            <div class="paly-title">
                <div class="line"></div>
                <text class="line-text">超级大乐透玩法</text>
            </div>
            <text class="detail-text">开奖时间：每周一、三、六20:30开奖</text>
             <text class="detail-text">玩法规则：从1-35的前区中选5个号码，1-12的后区中选2个，组成1注（2元），若追加投注1注（3元）</text>
              <text class="detail-text">返奖率：销售总额的50%</text>
              <text class="detail-text">中奖条件：</text>
              <div class="table-wrap">
                  <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">等级</text>
                      </div>
                       <div class="item item2">
                          <text class="item-text">中奖条件</text>
                      </div>
                        <div class="item item1">
                          <text class="item-text">奖金分配</text>
                      </div>
                          <div class="item item2">
                          <text class="item-text">说明</text>
                      </div>
                  </div>
                     <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">一等奖</text>
                      </div>
                       <div class="item item2">
                           <div class="many-itemrow">
                             <div class="item-col ">
                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                   <div class="icon red-icon"></div>
                                     <div class="icon blue-icon"></div>
                                       <div class="icon blue-icon"></div>
                             </div>
                             </div>
                        
                      </div>
                        <div class="item item1">
                          <text class="item-text">浮动</text>
                      </div>
                          <div class="item item2">
                              <div class="txt-wrap">
                          <text class="item-text">选5+2中5+2</text>
                          </div>
                      </div>
                  </div>
                   <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">二等奖</text>
                      </div>
                       <div class="item item2">
                         
                        <div class="many-itemrow">
                             <div class="item-col ">
                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                   <div class="icon red-icon"></div>
                                     <div class="icon blue-icon"></div>
                                       <div class="icon blue-icon"></div>
                             </div>
                             </div>
                                      
                      </div>
                        <div class="item item1">
                          <text class="item-text">浮动</text>
                      </div>
                          <div class="item item2">
                              <div class="txt-wrap">
                          <text class="item-text">选5+2中5+1</text>
                          </div>
                      </div>
                  </div>
                 
                    <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">三等奖</text>
                      </div>
                       <div class="item item2">
                         <div class="many-itemrow">
                             <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                   <div class="icon blue-icon"></div>
                                     <div class="icon blue-icon"></div>
                                    
                             </div>
                               <div class="item-col">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                   <div class="icon red-icon"></div>
                                   
                                                        
                             </div>
                         </div>
                         
                                      
                      </div>
                        <div class="item item1">
                          <text class="item-text">浮动</text>
                      </div>
                          <div class="item item2">
                              <div class="txt-wrap">
                          <text class="item-text">选5+2中5+0或中4+2</text>
                          </div>
                      </div>
                  </div>
                  
                    <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">四等奖</text>
                      </div>
                       <div class="item item2">
                         <div class="many-itemrow">
                             <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                   <div class="icon blue-icon"></div>
                                   
                                    
                             </div>
                               <div class="item-col">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon blue-icon"></div>
                                   <div class="icon blue-icon"></div>
                                   
                                                        
                             </div>
                         </div>
                         
                                      
                      </div>
                        <div class="item item1">
                          <text class="item-text">200元</text>
                      </div>
                          <div class="item item2">
                              <div class="txt-wrap">
                          <text class="item-text">选5+2中4+1或中3+2</text>
                          </div>
                      </div>
                  </div>
                    <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">五等奖</text>
                      </div>
                       <div class="item item2">
                         <div class="many-itemrow">
                             <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon red-icon"></div>
                                  
                                    
                             </div>
                               <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon blue-icon"></div>
                                  
                                   
                                                        
                             </div>
                                <div class="item-col">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon blue-icon"></div>
                                 <div class="icon blue-icon"></div>
                                   
                                   
                                                        
                             </div>
                         </div>
                         
                                      
                      </div>
                        <div class="item item1">
                          <text class="item-text">10元</text>
                      </div>
                          <div class="item item2">
                            <div class="txt-wrap">

                          <text class="item-text">选5+2中4+0或3+1或中2+2</text>
                          </div>
                      </div>
                  </div>
                      <div class="play-row">
                      <div class="item item1">
                          <text class="item-text">六等奖</text>
                      </div>
                       <div class="item item2">
                         <div class="many-itemrow">
                             <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                               
                                  
                                    
                             </div>
                               <div class="item-col bor-bot">

                               
                             <div class="icon red-icon"></div>
                               <div class="icon red-icon"></div>
                                 <div class="icon blue-icon"></div>
                                  
                                   
                                                        
                             </div>
                                <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon red-icon"></div>
                               <div class="icon blue-icon"></div>
                                                                
                                   
                                                        
                             </div>
                               <div class="item-col bor-bot">

                                    <div class="icon red-icon"></div>
                             <div class="icon blue-icon"></div>
                               <div class="icon blue-icon"></div>
                                                                
                                   
                                                        
                             </div>
                              <div class="item-col">

                               
                             <div class="icon blue-icon"></div>
                               <div class="icon blue-icon"></div>
                                                                
                                   
                                                        
                             </div>
                         </div>
                         
                                      
                      </div>
                        <div class="item item1">
                          <text class="item-text">5元</text>
                      </div>
                          <div class="item item2">
                              <div class="txt-wrap">
                                     <text class="item-text">选5+2中3+0或2+1或中1+2或0+2</text>

                              </div>

                      </div>
                  </div>
              
               <text class="end-txt">注：追加投注单注最多1600万</text>
              </div>
        </div>
         
    </div>
</template>
<script>
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
    export default{
           components: {WxcMinibar}
    }
</script>
<style scoped>
    .paly-content{
        background-color:#fff;
    /* width:686px; */
        /* align-items: center; */
        padding-left:32px;
        padding-right:32px;
    }
    .paly-title{
        padding-top:34px;
        flex-direction:row; 
    }
    .line{
        width:6px;
        height:30px;
        background-color: #E70D0D;
        align-self: center;
    }
    .line-text{
        align-self: center;
        margin-left:22px;
        color:#E70D0D;
        font-size:32px;
         font-family: PingFangSC-Medium;
    }
    .detail-text{
         font-family: PingFangSC-Medium;
      color:#333;
       font-size:28px;
       padding-top:32px;

    }
    .table-wrap{
        margin-top:24px;
        border-top-color:#A7A7A7;
        border-top-width:1px;
           border-left-width:1px;
    border-left-color:#A7A7A7;

    }
     .item{
 
    justify-content: center;
    align-items:center;
    border-bottom-width:1px;
    border-bottom-color:#A7A7A7;
     border-right-width:1px;
    border-right-color:#A7A7A7;
    flex-direction: row;
     
  }
  .item1{
      flex:1;
  }
    .item2{
      flex:2;
      /* width:265px; */
     
  }
  .play-row{
    flex-direction: row;
     

    
  }
  .item-text{
      color:#333;
     font-size:24px;
     /* width:100%; */
     
  }
  .icon{
      width:16px;
      height:16px;
      
      border-radius: 100%;
      margin-left:8px;
  }
  .red-icon{
      background-color: #E70D0D;
  }
  .blue-icon{
 background-color:#076BF2;
  }

  .many-itemrow{
      flex:1;
      width:100%;
      flex-direction: column;
  }
  .item-col{
      flex:1;
    flex-direction: row;
     /* border-width:1px; */
    /* border-color:#A7A7A7; */
   padding-top:10px;
   padding-bottom:10px;

       
  }
  .end-txt{
      font-size: 24px;
      color:#333;
      border-bottom-width: 1px;
      border-bottom-color: #A7A7A7;
         
         border-right-width: 1px;
      border-right-color: #A7A7A7;
      padding-top:12px;
      padding-bottom:12px;
      padding-left:32px;
  }
  .bor-bot{
  border-bottom-width: 1px;
      border-bottom-color: #A7A7A7;
    
  }
  .txt-wrap{
      width:200px;
  }
</style>